import React from 'react'

import LayoutContentWrapper from '@iso/components/utility/layoutWrapper';
import LayoutContent from '@iso/components/utility/layoutContent';
import {Fieldset, Form, Label} from "@iso/containers/FirestoreCRUD/Article/Article.styles";
import axios from "@iso/http";
import Qs from 'qs'
import message from '@iso/components/Feedback/Message';
import MessageContent from "@iso/containers/Feedback/Message/Message.styles";
import {withRouter} from "react-router";
import PageHeader from '@iso/components/utility/pageHeader';
import Button from '@iso/components/uielements/button';
import Card from "@iso/containers/UIElements/Card/Card.styles";
import Input from '@iso/components/uielements/input';
import {showErrorMessage, showSuccessMessage} from "@iso/containers/Feedback/Message/MessageUtils";
class Profile extends React.Component {


    constructor(props) {
        super(props);
        this.state={currentPassword:'',confirmNewPassword:'',newPassword:''}
    }

    updatePassword=()=>{
        axios.post('api/base/password/update',
        {   "newPassword":this.state.newPassword,
            "confirmNewPassword": this.state.confirmNewPassword,
            "currentPassword":this.state.currentPassword}
        ,{headers: {'Content-Type': 'application/json'}})
            .then((response)=>{
                this.setState({spinning:false})
                let  data=response.data;
                if (response.status==200){
                    if(data.status==1){
                        showSuccessMessage(data.message)
                    }else{
                        showErrorMessage(data.message);
                    }

                }else {
                    for (let i=0;i<data.errors.length;i++){
                        showErrorMessage(data.errors[i].defaultMessage);
                    }
                }
            })
            .catch(function (error) {
                showErrorMessage(error);
            });
    }

    onRecordChange = (event, key) => {
        let state={};
        state[key]=event.target.value;
        this.setState(state)
    };



    render() {

        return (
            <LayoutContentWrapper style={{ height: '120vh' }}>
                <PageHeader>
                    设置
                </PageHeader>
                <LayoutContent>
                    <Card
                        title='修改密码'
                        style={{ width: '100%' }}
                    >
                        <Form>
                            <Fieldset>
                                <Label>*当前密码:</Label>
                                <Input
                                    type='password'
                                    placeholder="请输入当前密码"
                                    value={this.state.currentPassword}
                                    onChange={e => this.onRecordChange(e, 'currentPassword')}
                                />
                            </Fieldset>
                            <Fieldset>
                                <Label>*新密码:</Label>
                                <Input
                                    type='password'
                                    placeholder="请输入新密码"
                                    value={this.state.newPassword}
                                    onChange={e => this.onRecordChange(e, 'newPassword')}
                                />
                            </Fieldset>
                            <Fieldset>
                                <Label>*确认新密码:</Label>
                                <Input
                                    type='password'
                                    placeholder="请输入确认新密码"
                                    value={this.state.confirmNewPassword}
                                    onChange={e => this.onRecordChange(e, 'confirmNewPassword')}
                                />
                            </Fieldset>

                            <Fieldset>
                                <Button type="primary" size='small' onClick={this.updatePassword}>
                                    提交
                                </Button>
                            </Fieldset>
                        </Form>
                    </Card>




                </LayoutContent>
            </LayoutContentWrapper>

        )
    }




}
// this wrapper is for fixing bug that we can not get this.props.location
export default withRouter(Profile)
